<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span v-if="objForm.id">店铺编辑审核</span>
        </b>
        <div class="u-right u-5mt">
          <el-button type="success" size="small" icon="el-icon-document-checked" @click="submitForm('objForm')">提交保存
          </el-button>
          <el-button size="small" icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
      <el-form :model="objForm" :rules="rules" ref="objForm" label-width="100px" class="u-form">
        <el-form-item label="是否自营店">
          <template>
            <el-radio-group v-model="objForm.is_own_shop">
              <el-radio :label="0">非自营店</el-radio>
              <el-radio :label="1">自营店</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="店铺名称">
          <el-input v-model="objForm.store_name" placeholder="请输入店铺名称" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="商家介绍">
          <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="objForm.store_desc"></el-input>
        </el-form-item>
        <el-form-item label="经验范围">
          <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="objForm.store_scope"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="店铺类型">
              <el-radio-group v-model="objForm.store_type">
                <el-radio :label="0">个人</el-radio>
                <el-radio :label="1">企业</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="objForm.contact_phone" placeholder="请输入联系电话" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="联系微信" prop="contact_wechat">
              <el-input v-model="objForm.contact_wechat" placeholder="请输入联系电话" maxlength="30" show-word-limit>
              </el-input>
            </el-form-item>
            <el-form-item label="公司地址" prop="store_area">
              <el-input v-model="objForm.store_area" placeholder="请输入公司地址" maxlength="100" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="店长姓名" prop="real_name">
              <el-input v-model="objForm.real_name" placeholder="请输入店长姓名" maxlength="30" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="店铺状态">
              <template>
                <el-radio-group v-model="objForm.store_status">
                  <el-radio :label="1">开启</el-radio>
                  <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>
            <el-form-item label="关闭原因" prop="store_close_info">
              <el-input type="textarea" :rows="4" placeholder="请输入关闭原因" v-model="objForm.store_close_info"></el-input>
            </el-form-item>

            <!-- <el-form-item label="开店时间" v-if="objForm.store_start_time != ''">
              <el-tag type="info">{{ objForm.store_start_time }}</el-tag>
            </el-form-item>
            <el-form-item label="关闭时间" v-if="objForm.store_end_time != ''">
              <el-tag type="info">{{ objForm.store_end_time }}</el-tag>

            </el-form-item> -->
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请用户" v-if="objForm.user_name != ''">
              <el-tag type="info">{{ objForm.user_name }}</el-tag>
              <el-button size="small"  @click="is_user_show = true">选择用户</el-button>
            </el-form-item>
            <el-form-item label="保证金">
              <el-tag type="info">{{ objForm.store_deposit }}</el-tag>
            </el-form-item>
            <el-form-item label="邀请码" v-if="objForm.popularize_code != ''">
              <el-tag type="info">{{ objForm.popularize_code }}</el-tag>
            </el-form-item>
            <el-form-item label="上级推广ID" v-if="objForm.store_top != ''">
              <el-tag type="info">{{ objForm.store_top }}</el-tag>
            </el-form-item>
            <el-form-item label="店铺logo">
              <upload file-folder="store" :file-arr="fileList" list-type="picture-card" :limit="1"
                accept="image/jpeg, image/png" tips="只能上传jpg/png文件，且不超过4MB" @getUploadFiles="getUploadFiles"></upload>
            </el-form-item>

            <el-form-item label="证件照片">
              <upload file-folder="certificate" :file-arr="fileList1" list-type="picture-card" :limit="3"
                accept="image/jpeg, image/png" tips="只能上传jpg/png文件，且不超过4MB" @getUploadFiles="getUploadFilesPhoto">
              </upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 用户弹出框 -->
    <el-dialog title="选择用户" :visible.sync="is_user_show" width="60%">
      <Users :isprops="true" @user_select="user_select"></Users>

      <span slot="footer" class="dialog-footer">
        <el-button @click="is_user_show = false" size="small">取 消</el-button>
        <el-button type="primary" @click="is_user_show = false" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commonEdit from "@/mixins/common-edit";
import Upload from "@/components/upload/upload";
import Users from "@/views/user/list.vue";
export default {
  components: {
    Upload,
    Users,
  },
  mixins: [commonEdit],
  data() {
    return {
      apiName: "store",
      backRoute: "storeManage", //成功跳转地址
      fileList: [], //店铺logo
      fileList1: [], //店铺照片
      is_user_show: false,//
      objForm: {
        id: "",
        store_desc: "",
        store_label: "",
        store_scope: "",
        store_status: 0,
        store_type: 0, //0个人 ,1企业
        store_deposit: 0, //保证金
        is_own_shop: 0, //是否自营店铺 1是 0否
        popularize_code: "", //店铺邀请码
        real_name: "",
        contact_phone: "",
        contact_wechat: "",
        store_area: "",
        store_check_time: "",
        store_close_info: "",
        check_status: 0,
        card_photo: [],
      },
    };
  },
  methods: {
    user_select(row) {
      //用户选择
      // window.console.log(row);
      this.objForm.user_id = row.id;
      this.objForm.user_name = row.nick_name;
      // this.objForm.head_img = row.head_img;
      this.is_user_show = false; //关闭弹框
    },
    clearUser() {
      this.objForm.user_id = 0;
      this.objForm.user_name = "";
      // this.objForm.head_img = "";
    },
    async getInfo() {
      const self = this;
      await self.beforeGetInfo();
      self.$api[self.apiName].info(self.objForm.id).then((response) => {
        if (response.code == 1) {
          self.objForm = response.data;
          self.afterGetInfo();
        }
      });
    },
    getUploadFiles(files) {
      this.fileList = files;
      if (files.length > 0) {
        this.objForm.store_label = files[0]["url"];
      } else {
        this.objForm.store_label = "";
      }
    },
    getUploadFilesPhoto(files) {
      let card_photo_arr = [];
      this.fileList1 = files;

      files.forEach(element => {
        card_photo_arr.push(element.url);

      });
      this.objForm.card_photo = card_photo_arr.join(",");
    },
    afterGetInfo() {
      this.fileList = [
        {
          name: "store_label",
          url: this.objForm.store_label,
        },
      ];
      if (this.objForm.card_photo) {
        for (var i = 0; i < this.objForm.card_photo.length; i++) {
          this.fileList1.push({
            url: this.objForm.card_photo[i],
          }); //相册
        }
      } else {
        this.fileList1 = [];
      }
    },
  },
  created() {
    if (this.$route.params.id) {
      this.objForm.id = this.$route.params.id;
    }
  },
};
</script>

<style >
.u-form {
  max-width: 900px;
}

.el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
  border-color: #e4e7ed;
  color: #000;
  cursor: not-allowed;
}
</style>
